<template>
  <div class="image-container">
    <el-card class="box-card">
      <div slot="header">
       <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="padding-bottom: 20px;">
         <!-- 全部：collect false   收藏：collect true -->
        <el-radio-group v-model="collect" size="mini" @change="collectChange">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
         <el-button @click="dialogVisible=true,imgSrc=null" type="success" style="float: right;" size="mini">上传图片素材</el-button>
      </div>
      <el-dialog
        title="提示"
        :append-to-body="true"
        :visible.sync="dialogVisible"
      >
        <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :headers="headers"
            :on-success="hUploadSuccess"
            name="image"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <!-- 如果当前有预览地址就说明图片上传成功了。 -->
            <img v-if="imgSrc" :src="imgSrc" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-dialog>
      <!-- 素材列表 -->
      <el-row :gutter="10">
        <el-col
            @mouseenter.native="mouseEnter(image)"
            @mouseleave.native="mouseLeave(image)"
            v-for="(image,index) in imageList"
            :key="image.id"  class="img_item" :xs="12" :sm="6" :md="6" :lg="4">
          <div class="img_box">
           <el-image
                style="width:100%; height:100%;"
                :src="image.url"
                >
                <div slot="error" style="height:180px;">
                    <img src="../../assets/WechatIMG9的副本.jpeg" style="width:100%; height:100%">
                </div>
            </el-image>
          </div>
          <div class="option" v-if="image.isFlag">
            <!-- 如果已收藏就显示红色 如果未收藏就显示白色 -->
            <span class="el-icon-star-off" @click="hswitchCollect(image)" :style="{color:image.is_collected?'red':'#fff'}"></span>
            <span class="el-icon-delete" @click="hdeleteimage(image.id,index)"></span>
          </div>
        </el-col>
      </el-row>
      <!-- /素材列表 -->
      <el-pagination
        layout="prev, pager, next"
        background
        :current-page.sync="curPage"
        :page-size="12"
        :total="total_count"
         @current-change="hPageChange"
        style="margin-top: 15px;"
        >
      </el-pagination>
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>

<script>
import { getImages, switchCollect, deleteimage } from '@/api/image'
import { getUser } from '@/utils/store'
export default {
  data () {
    return {
      imageList: [], // 素材列表
      curPage: 1, // 页码
      total_count: 0, // 总条数
      per_page: 12, // 每页显示多少条数据
      collect: false, // true显示收藏的  false显示全部
      dialogVisible: false, // 控制弹框是否显示
      imgSrc: null,
      headers: {
        Authorization: `Bearer ${getUser()}`
      }
    }
  },
  methods: {
    // 获取素材列表
    loadImages () {
      getImages({
        collect: this.collect, // true显示收藏的  false显示全部
        per_page: this.per_page, // 每页显示多少条数据
        page: this.curPage // 页码
      }).then(res => {
        // 添加自定义的参数
        // 修改一下源数据给每一项都添加一个字段专门用来控制操作区域是否显示
        const sourceData = res.data.data.results
        const newData = sourceData.map((item) => {
          return {
            ...item,
            isFlag: false // 这个字段用来控制操作区域是否显示
          }
        })
        this.imageList = newData // 从新赋值给列表
        this.total_count = res.data.data.total_count
        console.log(this.headers.Authorization)
      })
    },
    // 分页加载的逻辑
    hPageChange (curPage) {
      // 获取页码
      this.curPage = curPage
      this.loadImages()
    },
    // 方法调用时机：当是否收藏单选框绑定的值发生变化之后就会立即调用
    collectChange () {
      // 获取全部或者收藏的素材
      this.loadImages()
    },
    hswitchCollect (image) {
      // 控制是否收藏
      // idCollected表示当前是否已经收藏了  true代表已收藏  false代表未收藏
      // 当前的收藏状态和要传递给后端的字段是反向的
      switchCollect(image.id, !image.is_collected).then(res => {
        // 判断当前显示的是全部或者收藏
        if (this.collect === false) {
          // 当处于全部页时为防止点击收藏结构重排修改本地数据
          image.is_collected = !image.is_collected
        } else {
          // 当处于收藏页时点完取消收藏需要把已经不是收藏的素材移出所以从新拉取
          this.loadImages()
        }
      })
    },
    // 删除素材
    hdeleteimage (id, index) {
      // 拿到当前素材的id  然后调用删除接口  成功之后重新拉取数据
      // 优化：1.删除本地对应的数据  2.调用删除接口同步到服务器
      deleteimage(id, index).then(res => {
        // 操作本地数据让视图更新
        this.imageList.splice(index, 1)
        // this.loadImages()
      })
    },
    // 鼠标移入
    mouseEnter (image) {
      // 把当前项的isFlag字段变为true
      image.isFlag = true
    },
    // 鼠标移出
    mouseLeave (image) {
      image.isFlag = false
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    hUploadSuccess (res) {
      console.log(res)
      this.imgSrc = res.data.url
      this.loadImages()
    }
  },
  mounted () {
    this.loadImages()
  }
}
</script>

<style lang="less" scoped>
.avatar{
  width: 100%;
}
  .img_item {
    position: relative;
    box-sizing: border-box;
    .img_box{
      height: 180px;
      margin-top: 10px;
      img{
        width: 100%;
        height: 100%;

      }
    }
  }
  .option {
    position: absolute;
    left: 5px;
    right:5px;
    bottom: 5px;
    height: 30px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    display: flex;
    span {
      flex:1;
      text-align: center;
      cursor: pointer;
      line-height: 30px;
    }
  }
.avatar-uploader {
    text-align: center;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar-uploader{
  /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
 }
}
</style>
